import React, { Component } from 'react';
import {
  Colors,
  View,
  Text,
  PieChart
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class PieChartScreen extends Component {

  renderDefaultExample() {
    return (
      <>
        <Text>
          Segments:blue:50,red:30,green:20
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} />
      </>
    );
  }
  renderDefaultExample1() {
    return (
      <>
        <Text>
          Segments:blue:40,red:30,green:20,black:10
        </Text>
        <PieChart segments={[{ percentage: 40, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }, { percentage: 10, color: Colors.black }]} diameter={144} />
      </>
    );
  }
  renderDividerColorExample() {
    return (
      <>
        <Text>
          dividerColor:Colors.black
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} dividerColor={Colors.black} />
      </>
    );
  }
  renderDividerColorExample1() {
    return (
      <>
        <Text>
          dividerColor:Colors.yellow30
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} dividerColor={Colors.yellow30} />
      </>
    );
  }
  renderDividerWidthExample() {
    return (
      <>
        <Text>
          dividerWidth:10
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} dividerWidth={10} dividerColor={Colors.black}/>
      </>
    );
  }
  renderDividerWidthExample1() {
    return (
      <>
        <Text>
          dividerWidth:20
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} dividerWidth={20} dividerColor={Colors.black}/>
      </>
    );
  }
  renderDiameterExample() {
    return (
      <>
        <Text>
          diameter:72
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={72} dividerColor={Colors.black}/>
      </>
    );
  }
  renderDiameterExample1() {
    return (
      <>
        <Text>
          diameter:144
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} dividerColor={Colors.black}/>
      </>
    );
  }
  render() {
    return (
      <TestSuite name="PieChart">
        <TestCase itShould=" Segments">
          <View padding-20>{this.renderDefaultExample()}</View>
          <View padding-20>{this.renderDefaultExample1()}</View>
        </TestCase>
        <TestCase itShould="dividerColor">
          <View padding-20>{this.renderDividerColorExample()}</View>
          <View padding-20>{this.renderDividerColorExample1()}</View>
        </TestCase>
        <TestCase itShould="dividerWidth">
          <View padding-20>{this.renderDividerWidthExample()}</View>
          <View padding-20>{this.renderDividerWidthExample1()}</View>
        </TestCase>
        <TestCase itShould="diameter">
          <View padding-20>{this.renderDiameterExample()}</View>
          <View padding-20>{this.renderDiameterExample1()}</View>
        </TestCase>
      </TestSuite>
    );
  }
}
